<template>
  <div class="vehicle-detail">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="0">
          <el-row>
            <el-form label-width="100px" :disabled="isEdit" :class="isEdit?'userForm':''">
              <el-col :span="8">
                <el-form-item label="员工编号:">
                  <el-input v-model="driverInfo.id" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="司机名称:">
                  <el-input v-model="driverInfo.name" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item v-if="driverInfo.agency" label="所属机构:">
                  <el-input v-model="driverInfo.agency.name" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电话:">
                  <el-input v-model="driverInfo.mobile" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年龄:">
                  <el-input v-model="driverInfo.age" />
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="1">
          <el-row>
            <el-form label-width="120px" :disabled="isEdit" :class="isEdit?'userForm':''">
              <el-col :span="8">
                <el-form-item label="驾驶证号:">
                  <el-input v-model="driverInfo.licenseNumber" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="准驾车型:">
                  <el-input v-model="driverInfo.allowableType" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="初次领证日期:">
                  <el-date-picker
                    v-model="driverInfo.initialCertificateDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾驶证有效期限:">
                  <el-input v-model="driverInfo.validPeriod" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾龄:">
                  <el-input v-model="driverInfo.driverAge" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾驶证类型:">
                  <el-input v-model="driverInfo.licenseType" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="从业资格证:">
                  <el-input v-model="driverInfo.qualificationCertificate" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入场证信息:">
                  <el-input v-model="driverInfo.passCertificate" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="图片信息">
                  <div v-show="isEdit">
                    <img v-if="!driverInfo.picture" src="@/assets/img/hcbgi.png" alt="" style="width:212px;height:159px">
                    <div v-else>
                      <img
                        v-for="(item,index) in driverInfo.picture.split(',')"
                        :key="index"
                        :src="item"
                        alt=""
                        style="width:212px;height:159px;margin-right:20px"
                      >
                    </div>
                  </div>
                  <!-- <ImageUpload /> -->
                  <div v-show="!isEdit" style="display:flex">
                    <div v-if="isShowExp">
                      <img src="@/assets/img/zhuye.png" alt="" style="width:212px;height:159px;margin-right:15px">
                      <img src="@/assets/img/fuye.png" alt="" style="width:212px;height:159px;margin-right:15px">
                    </div>
                    <ImageUpload ref="licenseRef" />
                  </div>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-row v-if="isEdit" type="flex" justify="center" class="footer">
      <el-button type="primary" @click="editUser">编辑</el-button>
    </el-row>
    <el-row v-else type="flex" justify="center" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
    </el-row>
  </div>
</template>

<script>
import { editDriverDetail, editDriverLicense, getDriverDetail, getDriverLicense } from '@/api/employee'
export default {
  data() {
    return {
      activeName: '0',
      driverInfo: {},
      isEdit: true,
      isShowExp: true
    }
  },
  created() {
    this.getDriverInfo()
  },
  methods: {
    // 司机基本信息
    async getDriverInfo() {
      this.driverInfo = await getDriverDetail(this.$route.query.id)
    },
    // 驾驶证基本信息
    async getDriverLicenseInfo() {
      this.driverInfo = await getDriverLicense(this.$route.query.id)
      if (this.driverInfo.picture) {
        this.$refs.licenseRef.fileList = this.driverInfo.picture.split(',').map(item => ({ 'url': item }))
        this.isShowExp = false
      }
      // console.log(this.$refs.licenseRef)
    },
    editUser() {
      this.isEdit = false
    },
    // 取消
    cancel() {
      this.isEdit = true
    },
    handleClick() {
      this.isEdit = true
      if (this.activeName === '0') {
        this.getDriverInfo()
      } else {
        this.getDriverLicenseInfo()
      }
    },
    // 保存车辆详情
    async save() {
      if (this.activeName === '0') {
        await editDriverDetail(this.driverInfo)
        this.$message.success('更新成功')
      } else {
        const fileList = this.$refs.licenseRef.fileList
        await editDriverLicense({ ...this.driverInfo, picture: fileList.map(item => item.url).toString() })
        this.$message.success('更新成功')
      }

      // const fileList = this.$refs.truckImage.fileList
      // await editTruckDetail({ ...this.trackInfo, picture: fileList?.[0]?.url || '' })
    }
    // 展示实例图
  }
}
</script>

<style lang="scss" scoped>
.truckAs{
  display: none;
}

.vehicle-detail{
  position: relative;
  .el-card{
    height: calc(100vh - 200px);
    margin: 12px 12px 0;
    padding: 0 24px;
    overflow: hidden;
    .el-tabs{
      ::v-deep .el-tabs__item{
        &.is-active{
          font-size: 16px;
          font-weight: 700;
          color: #20232a !important;
        }
      }
    }
  }
  .footer{
    position: absolute;
    margin:0 12px;
    padding: 30px 0 16px;
    bottom: 0px;
    width: 100%;
    border-top: 1px solid #e5e7ec;
    background-color: #fff;
  }
  .userForm{
    ::v-deep .el-input__inner {
    border: none;
    background-color: #fff;
    color: #20232a;
    }
  }
}
</style>

